<template>


  <el-table :data="tableData" style="width: 100%" v-loading="loading">
    <el-table-column fixed prop="store_name" label="商家名称" align="center" />

    <el-table-column prop="id" label="商家ID" />
    <el-table-column label="商家logo" align="center">
      <template #default="scope">
        <el-image style="width: 100px; height: 100px;border-radius: 50%" :src="formatUrl(scope.row.store_logo)"
          :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :initial-index="4" fit="cover" />
      </template>
    </el-table-column>
    <el-table-column prop="store_mobile" label="商家手机号" align="center" />
    <el-table-column prop="todayorder" label="今日订单数" align="center" />

    <el-table-column prop="monthorder" label="当月订单数" align="center" />

    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-link type="primary" @click="onSelectShop(scope.row.id)">选择店铺</el-link>

      </template>
    </el-table-column>

  </el-table>
  <div class="pagination">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.page"
      :page-sizes="[10, 30, 50, 100]" :page-size="pagination.per_page" layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>
  </div>
</template>

<script lang="ts" setup>
import { ShopApi } from "~/api/shop";
import { LoginApi } from "~/api/login";
import { onMounted, ref } from "vue";
import { formatUrl } from "~/http/http";
import { useRouter } from 'vue-router'
import axios from "axios";
const loading = ref(true)
const router = useRouter()
const tableData = ref();
const pagination = ref({
  total: 0,
  page: 1,
  per_page: 10
})
const login = async () => {
  const paginationStore: any = JSON.parse(localStorage.getItem('pagination'))
  const token = sessionStorage.getItem('token')
 
  if (paginationStore) {
    pagination.value.page = paginationStore.page
    pagination.value.per_page = paginationStore.per_page

  }
  if (token) {
    getData();

  } else {
    const user = await LoginApi.login({
      // username: "18899998888",
      username: "13990999999",
      password: "123456",
      provider: "users",
    });
    sessionStorage.setItem("token", user.data.data.access_token);
    getData();
  }
  
};
const getData = async () => {
  const shops = await ShopApi.getList({ page: pagination.value.page, per_page: pagination.value.per_page });
  console.log(shops.data.data)
  pagination.value.total = shops.data.data.total
  tableData.value = shops.data.data.data;
  loading.value = false
};
const onSelectShop = (id: number) => {
  localStorage.setItem("pagination", JSON.stringify(pagination.value))
  router.push('/goods?id=' + id)

}
const handleSizeChange = (val: any) => {
  console.log(`每页 ${val} 条`);
  pagination.value.per_page = val
  getData()
}
const handleCurrentChange = (val: any) => {
  console.log(`当前页: ${val}`);
  pagination.value.page = val
  getData()
}
onMounted(() => {

  login();
});
</script>
<style>
.pagination {
  display: flex;
  justify-content: flex-end;
  margin: 30px;
}
</style>
